<!--
 * @author: Spring
 * @create: 2021-06-23 10:46 AM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-06-23 15:13 PM
 * @desc: 
-->
<template>
  <div class="container" only="faceshow" v-show="show">
    <div class="triangle" only="faceshow"></div>
    <div class="face_box" only="faceshow">
      <img only="faceshow" @click="chooseFace(item)" :src="item" alt="" v-for="(item, index) in showArr" :key="index" />
    </div>
    <div class="circle_box" only="faceshow">
      <div 
      :style="{backgroundColor:current==index?'#D8D8D8':'#F0F0F0'}"
      class="circle" 
      v-for="(item,index) of circle" 
      :key="item"
      @click="page(index)"
      only="faceshow"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props:['face','show'],
  data() {
    return {
      //表情数组
      arr: [
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f603.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f618.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f602.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f633.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f60d.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f44f.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f44d.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f44e.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f601.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f609.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f620.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f61e.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f625.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f62d.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f61d.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f621.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/2764.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f494.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f623.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f614.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f604.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f637.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f61a.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f613.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f60a.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f622.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f61c.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f628.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f630.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f632.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f60f.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f631.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f62a.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f616.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f60c.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f612.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f47b.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f385.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f467.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f466.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f469.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f468.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f436.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f431.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f44a.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/270a.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/270c.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4aa.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f446.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f447.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f449.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f448.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f44c.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4a9.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f917.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f60e.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f913.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f469-200d-1f4bb.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f468-200d-1f4bb.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f644.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f62d.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f628.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f92a.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f389.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f914.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f435.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f607.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f92c.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f408.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f639.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f640.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f1e8-1f1f3.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f46e.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f415.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/2705.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f44b.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f525.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f41b.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f349.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f47d.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f916.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/231a.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f91d.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3f3-fe0f-200d-1f308.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f6a9.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4a4.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/ae.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/a9.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4af.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/2122.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4bb.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4c5.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4cc.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/2709.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/2328.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4d7.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f933.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f6cc.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3a3.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3a8.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3a7.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3b8.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3a4.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3f8.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3c0.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/26bd.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3ae.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3ca.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f357.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f984.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f51e.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f64f.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/2600.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f319.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f31f.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/26a1.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/2601.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/2614.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f341.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f33b.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f343.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f457.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f380.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f444.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f339.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/2615.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f382.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f559.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f37a.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f50d.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4f1.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3e0.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f697.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f381.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/26bd.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f4a3.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f48e.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f48a.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f92e.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f3c6.svg",
        "https://gold-cdn.xitu.io/asset/twemoji/2.6.0/svg/1f47f.svg",
      ],
      //展示数组
      showArr: [],
      //小圆点数量
      circle:0,
      //当前在第几页
      current:0
    };
  },
  components: {},
  mounted() {
    this.showArr=this.arr.slice(0,54)
    this.circle=Math.ceil(this.arr.length/54)
  },
  methods: {
    page(index){
      this.current=index
      let start=index*54
      let end=(index+1)*54
      this.showArr=this.arr.slice(start,end)
    },
    chooseFace(item){
      this.$emit('face',item)
    }
  },
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 304px;
  height: 234px;
  box-sizing: border-box;
  padding: 12px;
  @include flex(flex-start,center,column);
  box-shadow: 0 5px 18px 0 rgb(0 0 0 / 16%);
  .triangle{
    @include position(absolute,-19.2px,none,none,12%,0,0);
    border: 9.6px solid transparent;
    border-bottom-color:#fff;
  }
}
.face_box{
  display: grid;
  grid-template-columns: repeat(9,22px);
  grid-template-rows: repeat(6,22px);
  grid-gap: 10px;
  img{
    cursor: pointer;
  }
}
.circle_box{
  margin-top: 10px;
  width: 48px;
  @include flex(space-between,center);
  .circle{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    cursor: pointer;
  }
}

</style>
